<template>
  <van-tabbar v-model="active" active-color="darkred" inactive-color="#666">
    <van-tabbar-item to="/home" icon="home-o">首页</van-tabbar-item>
    <van-tabbar-item to="/topic" icon="label-o">专题</van-tabbar-item>
    <van-tabbar-item to="/category" icon="apps-o">分类</van-tabbar-item>
    <van-tabbar-item to="/cart" icon="shopping-cart-o">购物车</van-tabbar-item>
    <van-tabbar-item to="/user" icon="user-o">我的</van-tabbar-item>
  </van-tabbar>
</template>

<script>
export default {
  data () {
    return {
      active: 0
    }
  },
  // 由于$route的值是异步更新的，所以需要在watch中监听
  // mounted () {
  //   this.active = this.$route.meta.num
  //   console.log(this.$route)
  //   console.log(this.$route.meta)
  // },
  watch: {
    $route () {
      this.active = this.$route.meta.num
      // console.log(this.$route)
      // console.log(this.$route.meta)
    }
  },
  computed: {
    // active: {
    //   get () {
    //     switch (this.$route.path) {
    //       case '/home':
    //         return 0
    //       // break,因为已经return了，就不用return了
    //       case '/topic':
    //         return 1
    //       case '/category':
    //         return 2
    //       case '/cart':
    //         return 3
    //       case '/user':
    //         return 4
    //       default:
    //         break
    //     }
    //   },
    //   set () {}
    // }
  }
}
</script>

<style lang="less" scoped></style>
